<template>
	<view class="content">
		<image class="logo" src="/static/icon.png" mode="aspectFit"></image>
		<view class="button-area">
			<button class="action-button blue" @click="goToSignIn">✔ 安全绿十字</button>
			<button class="action-button blue" @click="goToBindWeChat">🔗 绑定微信</button>
			<button class="action-button blue" @click="goToUploadWork">📤 上传工作</button>
			<button class="action-button blue" @click="goToViewNotices">📋 查看公告</button>
			<button class="action-button blue" @click="goToViewItems">🧰 申请物品</button>
			<button class="action-button blue" @click="goToViewReturnItems">📥 归还物品</button>
			<button class="action-button blue" @click="goToViewRequestList">📌 审批物品</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			title: 'Hello',
			UserCode: '',
		}
	},
	methods: {
		goToSignIn() {
			uni.navigateTo({
				url: '/pages/index/green'
			})
		},
		goToBindWeChat() {
			wx.login({
				success: (res) => {
					console.log(res, 'wx.login()返回的数据');
					this.UserCode = res.code;
					const token = uni.getStorageSync('token');
					console.log("token is ", token)
					uni.request({
						url: this.$baseUrl + '/user/bindWx',
						method: 'POST',
						data: { code: this.UserCode },
						header: {
							'satoken': token,
							'content-type': 'application/x-www-form-urlencoded'
						},
						success: (res) => {
							console.log('请求成功：', res.data)
						},
						fail: (err) => {
							console.error('请求失败：', err)
						}
					})
				}
			});
		},
		goToUploadWork() {
			uni.navigateTo({
				url: '/pages/WorkPages/WorkPages'
			})
		},
		goToViewNotices() {
			uni.navigateTo({
				url: '/pages/notices/noticeList'
			})
		},
		goToViewItems() {
			uni.navigateTo({
				url: '/pages/items/itemList'
			})
		},
		goToViewReturnItems() {
			uni.navigateTo({
				url: '/pages/items/returnItem'
			})
		},
		goToViewRequestList() {
			uni.navigateTo({
				url: '/pages/items/RequestList'
			})
		}
		
	}
}
</script>

<style>
.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 60rpx 0;
}

/* 居中偏上的图片 */
.logo {
	width: 200rpx;
	height: 200rpx;
	margin-top: 80rpx;
	margin-bottom: 60rpx;
}

/* 并排按钮区域 */
.button-area {
	width: 90%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 30rpx;
}

/* 每个按钮占 45%，适配两列布局 */
.action-button {
	width: 45%;
	font-size: 36rpx;
	padding: 24rpx;
	border-radius: 16rpx;
	color: #fff;
	text-align: center;
	box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.1);
}

/* 不同颜色样式 */
.green {
	background-color: #4CAF50;
}
.blue {
	background-color: #2196F3;
}
.orange {
	background-color: #FF9800;
}
.gray {
	background-color: #607D8B;
}
</style>
